<template>
	<view class="shnagpin" :style="'flex-wrap:'+ warp+';'">
		<!-- 单个商品 -->
		
		<view class="shangpin-item" v-for="(item,index) in date " :key="index" :style="'width:'+bian+'rpx;'">
			<image class="imgs" :src="item.imgurl" mode="" :style="'height:'+bianh+'rpx;'"></image>
		
			<view class="shangpin-text">
				<text class="shangpin-text-name" >{{item.name}}</text>
				<view class="jiage">
					<text class="one">¥{{item.pprice}}</text>
					<text class="tow">¥{{item.oprice}}</text>
					
			</view>
			<text class="three">{{item.discount}}折</text>
			</view>
			
		</view>
		
		
		
		
	
	
	</view>
	
	
</template>

<script>
	export default{
		props:{
			date:Array,
			bian:{
				type:Number,
				default:"375rpx"
			},
			bianh:{
				type:Number,
				default:"375rpx"
			},
			warp:{
				type:String,
				default:"wrap"
			}
		}
		
	}
</script>

<style scoped>
	.shnagpin{
		display: flex;
		/* flex-wrap: wrap; */
	}
	.shangpin-item{
	/* 	width: 375rpx; */
		padding-bottom: 20rpx ;
		text-align: center;
		
		
	}
	.imgs{
		width: 100%;
		/* height: 375rpx; */
	}
	.shangpin-text-name{
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333;
		word-break:break-all;
		padding: 6rpx 20rpx;
	}
	
	.tow{
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999;
	}
	.three{
		border-radius: 4rpx;
		border: 1px solid #fff;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: red;
	}
</style>